<template>
  <div class="search-container flex flex-wrap items-center gap-4 mb-4">
    <slot name="filters"></slot>
    
    <el-input
      v-if="showSearch"
      v-model="searchValue"
      :placeholder="searchPlaceholder"
      prefix-icon="Search"
      clearable
      @clear="onRefresh"
      @input="onSearchInput"
      style="width: 240px"
      class="search-input"
    />
    
    <div class="flex gap-2">
      <slot name="actions"></slot>
      
      <el-button v-if="showRefresh" type="primary" class="search-btn" @click="onRefresh">
        <el-icon class="mr-1"><Refresh /></el-icon>重置
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'

export default {
  name: 'TableToolbar',
  components: {
    Search,
    Refresh
  },
  props: {
    showSearch: {
      type: Boolean,
      default: true
    },
    searchPlaceholder: {
      type: String,
      default: '搜索...'
    },
    showRefresh: {
      type: Boolean,
      default: true
    }
  },
  emits: ['search', 'refresh'],
  setup(props, { emit }) {
    const searchValue = ref('')
    
    // 监听搜索值变化
    watch(searchValue, (newVal) => {
      emit('search', newVal)
    })
    
    // 搜索输入处理
    const onSearchInput = (value) => {
      // 防抖处理可以在父组件中实现
      emit('search', value)
    }
    
    // 刷新处理
    const onRefresh = () => {
      searchValue.value = ''
      emit('refresh')
    }
    
    return {
      searchValue,
      onSearchInput,
      onRefresh
    }
  }
}
</script>

<style scoped>
.search-input {
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.search-input:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.search-btn {
  display: flex;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style> 